<template>
    <div id="search">
        <div id="root">
            <div class="SearchPage-header">
                <input type="text" class="SearchPage-headerInput" v-model="value" placeholder="搜索房间/主播/分类">
                <div class="SearchPage-headerSearch" @click="result">搜索</div>
            </div>
            <div class="SearchPage-content">
                <div class="SearchHot">
                    <div class="SearchHot-title">最近热搜</div>
                    <div class="SearchHot-content">
                        <!-- left -->
                        <div class="SearchHot-contentLeft">
                            <div class="SearchHotItem" v-for="(item,index) in left" :key="index" @click="leftt(index)">
                                <i :class="'SearchHotItem-rank rank'+(index+1)"></i>
                                <span class="SearchHotItem-name">{{item}}</span>
                            </div>
                        </div>
                        <!-- right -->
                        <div class="SearchHot-contentRight">
                            <div class="SearchHotItem" v-for="(item,indexx) in right" :key="indexx"
                                @click="rightt(indexx+5)">
                                <i :class="'SearchHotItem-rank rank'+(indexx+6)"></i>
                                <span class="SearchHotItem-name">{{item}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'search',
        components: {
        },
        data() {
            return {
                left: [],
                right: [],
                keyword: '',
                index: 1,
                value: '',
            }
        },
        created() {
            this.modern()
            var _this = this;
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.result()
                }
            };
        },
        methods: {
            // 点击左边热度请求
            leftt(index) {
                this.$router.push({
                    path: '/result/streaming',
                    query: {
                        index: this.index,
                        zive: this.left[index]
                    }
                })
            },
            // 点击右边热度请求
            rightt(indexx) {
                this.$router.push({
                    path: '/result/streaming',
                    query: {
                        index: this.index,
                        zive: this.right[indexx - 5]
                    }
                })
            },
            // 点击搜索请求
            result() {
                if (this.value !== '') {
                    this.$router.push({
                        path: '/result/streaming',
                        query: {
                            index: this.index,
                            zive: this.value
                        }
                    })
                }

            },

            modern() {
                this.$http.get('/api/search/getTodayTop?count=10&isAjax=1').then(res => {
                    this.left = res.data.data.slice(0, 5)
                    this.right = res.data.data.slice(5, 11)
                })
            }
        },
    }
</script>
<style scoped>
    #search {

        width: 100%;
        height: 100vh;
        background-color: #fff;
    }

    .SearchPage-header {
        box-sizing: border-box;
        width: 100%;
        position: relative;
        padding: 7px 60px 0 10px;
        height: 44px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .SearchPage-headerInput {
        padding: 0 10px;
        margin: 0;
        height: 30px;
        line-height: 1.15;
        font-size: 14px;
        color: #333;
        outline: none;
        border: none;
        background-color: #f8f8f8;
        width: 100%;
        box-sizing: border-box;


    }

    .SearchPage-headerSearch {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        color: #676767;
    }

    .SearchHot {
        width: 100%;
    }

    .SearchHot-title {
        box-sizing: border-box;
        padding-left: 10px;
        width: 100%;
        height: 55px;
        line-height: 55px;
        font-size: 14px;
        color: #333;
        border-bottom: 1px solid #eee;
        font-weight: 700;
    }

    .SearchHot-content {
        width: 100%;
        overflow: hidden;
    }

    .SearchHot-contentLeft {
        float: left;
        width: 50%;
        height: 220px;
        overflow: hidden;
    }

    .SearchHot-contentRight {
        float: left;
        width: 50%;
        height: 220px;
        overflow: hidden;
    }

    .SearchHotItem {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 10px;
        width: 100%;
        height: 44px;
    }

    .SearchHotItem-rank {
        display: block;
        margin-right: 5px;
        width: 14px;
        height: 14px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/icon-v2_ed53f03.png) no-repeat;
        -webkit-background-size: 245px 20px;
        -moz-background-size: 245px 20px;
        background-size: 245px 20px;
    }

    .rank1 {
        background-position: -62px 0;
    }

    .rank2 {
        background-position: -90px 0;
    }

    .rank3 {
        background-position: -118px 0;
    }

    .rank4 {
        background-position: -104px 0;
    }

    .rank5 {
        background-position: -160px 0;
    }

    .rank6 {
        background-position: -133px 0;
    }

    .rank7 {
        background-position: -146px 0;
    }

    .rank8 {
        background-position: -48px 0;
    }

    .rank9 {
        background-position: -34px 0;
    }

    .rank10 {
        background-position: -76px 0;
    }

    .SearchHotItem-name {
        display: block;
        flex: 1;
        line-height: 1.15;
        font-size: 14px;
        color: #666;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;

    }
    input::placeholder {
        font-size: 12px;
        font-family: Arial;
        letter-spacing: 2px;
        /* color: red !important; */
        /* text-align: center;  */
        line-height: 30px;
    }
</style>